<template>
  <view class="normal-login-container">
    <view class="logo-content align-center justify-center flex">
      <text class="title">注册账号</text>
    </view>
    <view class="login-form-content">
		<uni-forms ref="form" :rules="rules" :modelValue="formData">
			<uni-forms-item label="账号" name="username">
				<uni-easyinput type="text" v-model="formData.username" prefixIcon="person" placeholder="请输入账号" />
			</uni-forms-item>
			<uni-forms-item label="密码" name="password">
				<uni-easyinput type="password" v-model="formData.password" prefixIcon="locked" placeholder="请输入密码" />
			</uni-forms-item>
			<uni-forms-item label="重复密码" name="name">
				<uni-easyinput type="password" v-model="formData.confirmPassword" prefixIcon="locked" placeholder="请输入重复密码" />
			</uni-forms-item>
		</uni-forms>
		<view class="input-item flex align-center" style="width: 60%;margin: 0px;" v-if="captchaEnabled">
		  <view class="iconfont icon-code icon"></view>
		  <input v-model="formData.code" type="number" class="input" placeholder="请输入验证码" maxlength="4" />
		  <view class="login-code"> 
		    <image :src="codeUrl" @click="getCode" class="login-code-img"></image>
		  </view  >
		</view>
		<view class="action-btn">
		<button @click="submit('handleRegister')" class="login-btn cu-btn block bg-blue lg round">注册</button>
		</view>
	</view>
    
	<view class="xieyi text-center">
		<text @click="handleLogin" class="text-blue">使用已有账号登录</text>
	</view>
  </view>
</template>

<script>
  import {getRegister,getCodeImg } from '@/api/register'

  export default {
    data() {
      return {
		codeUrl: "",
		captchaEnabled: true,
		loading: false,
        formData: {
          username: '',
          password: '',
		  confirmPassword: '',
		  code: "",
          uuid: ''
        },
		rules: {
		    username:{
				rules:[{required: true, errMessage: '请输入用户名'}],
				validateTrigger:'submit'
			},
			password:{
				rules:[{required: true, errMessage: '请输入用户名'},
						{
								minLength: 5,
								maxLength: 20,
								errorMessage: '{label}长度必须介于 {minLength} 到 {maxLength} 个之间',
						}
				],
				label: '密码',
				validateTrigger:'submit'
			},
			confirmPassword:{
				rules:[{required: true, errMessage: '请再次输入密码'}],
				validateTrigger:'submit'
			},
			
		      },
      }
    },
	created() {
	    this.getCode()
	},
    methods: {
		handleLogin(){
		 uni.navigateTo({
		     url: '/pages/login'
		   });
		},
		
      // 获取图形验证码
      getCode() {
        getCodeImg().then(res => {
          this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled
          if (this.captchaEnabled) {
            this.codeUrl = 'data:image/gif;base64,' + res.img
            this.formData.uuid = res.uuid
          }
        })
      },
		
      // 注册方法
	  submit() {
		
	  	this.$refs.form.validate().then(res=>{
			if (this.formData.password !== this.formData.confirmPassword) {
			    uni.showToast({
			    	icon: 'none',
					title:'两次密码不一致'
			    })
				return 
			}
			getRegister(this.formData).then(ress => {
				console.log(ress)
				this.loading = true
				if (ress.code === 200) {
					console.log('1234567')
				    uni.showToast({
						title:'注册成功'
				    })
					//跳转页面
					uni.navigateTo({
						url: '/pages//login'
					  });
				}
				
			}).catch(() => {
				this.loading = false
				if (this.captchaEnabled) {
				  this.getCode()
				}
		
			})
			
	  		
	  	}).catch(err =>{
	  		console.log('表单错误信息：', err);

	  	})	
			  
	} 
	
	
  }
}
</script>

<style lang="scss">
  page {
    background-color: #ffffff;
  }

  .normal-login-container {
    width: 100%;

    .logo-content {
      width: 100%;
      font-size: 21px;
      text-align: center;
      padding-top: 15%;

      image {
        border-radius: 4px;
      }

      .title {
        margin-left: 10px;
      }
    }

    .login-form-content {
      text-align: center;
      margin: 20px auto;
      margin-top: 15%;
      width: 80%;

      .input-item {
        margin: 20px auto;
        background-color: #f5f6f7;
        height: 45px;
        border-radius: 20px;

        .icon {
          font-size: 38rpx;
          margin-left: 10px;
          color: #999;
        }

        .input {
          width: 100%;
          font-size: 14px;
          line-height: 20px;
          text-align: left;
          padding-left: 15px;
        }

      }

      .login-btn {
        margin-top: 40px;
        height: 45px;
      }

      .xieyi {
        color: #333;
        margin-top: 20px;
      }
      
      .login-code {
        height: 38px;
        float: right;
      
        .login-code-img {
          height: 38px;
          position: absolute;
          margin-left: 10px;
          width: 200rpx;
        }
      }
    }
  }

</style>
